<template>
  <div class="article_trans">
    <p class="title">优惠产品转化率</p>
    <div class="form_search">
     <el-form>
        <el-select v-model="cycle" placeholder="周期" class="cycle" @change="changeCycle">
          <el-option v-for="item in cycleList" :key="item.value" :value="item" :label="item.label"></el-option>
        </el-select>
        <div class="createTime timePicker" style="width: 100%">
          <el-input v-if="dateType !== 'yearrange' && dateType !== 'quartrange'" v-model="form.local_time.value"  placeholder="选择日期"></el-input>
          <el-date-picker  @change="changeTime"  v-model="timePicker" :pickerOptions="pickerOptions"
            :type="dateType" range-separator="-"   prefix-icon="0" start-placeholder="开始日期"
          :value-format="timeFormat" end-placeholder="结束日期" placeholder="选择日期"></el-date-picker>
        </div>
        <el-select  v-model="form.site.value" placeholder="站点" clearable  @keyup.enter.native="getData" @focus="getSiteList">
          <el-option v-for="item in siteList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
        <el-select  v-model="form.article_title.value" placeholder="文章标题" clearable  @keyup.enter.native="getData" @focus="getTitleList" >
          <el-option v-for="item in titleList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form>
      <div class="form_btn">
        <el-button type="search" icon="iconfont icon-search_normal" @click="getData"></el-button>
        <el-button  icon="iconfont icon-Refresh" @click="resetForm"></el-button>
      </div>
    </div>
     <el-table :data="list" :height="chartsH+'px'" v-loading="loading">
      <el-table-column  label="周期" prop="cycleTime" align="left" width="60"></el-table-column>
      <el-table-column  label="日期" sortable prop="cycle"  width="120"></el-table-column>
      <el-table-column  label="文章标题"  prop="article_title" width="180" align="left"></el-table-column>
      <el-table-column  label="站点"  prop="site" ></el-table-column>
      <el-table-column  label="优惠产品" prop="discount_product" align="left"></el-table-column>
      <el-table-column  label="浏览量" width="100" sortable prop="page_view" align="left"></el-table-column>
      <el-table-column  label="点击次数" width="120" sortable prop="discount_product_click" ></el-table-column>
      <el-table-column  label="转化率" width="100" sortable prop="percent_conversion" >
         <template slot-scope="scope">
          <p>{{scope.row.percent_conversion}}%</p>
         </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { articleTrans } from '@/api/kanban/index.js'
import { setSearchParams, timeTransfor, setPickerOptions, timeFormat } from '@/utils/index.js'
import { siteSiteList } from '@/api/manage/site.js'
import { articleManageTitle } from '@/api/article/article_manage.js'
import mixin from './mixin'
export default {
  mixins: [mixin],
  data () {
    return {
      timePicker: '',
      timeFormat: 'yyyy-MM-dd',
      cycle: '日',
      form: {
        local_time: { value: '', op: 'RANGE' },
        site: { value: '', op: '=' },
        article_title: { value: '', op: 'like' },
      },
      list: [],
      loading: false,
      pickerOptions: setPickerOptions(),
      titleList:[],
      siteList: [],
      chartsH: ''
    }
  },
  props: ['show'],
  watch : {
    show: function() {
      if(this.show) {
        this.getData()
        this.setHeight()
      }
    }
  },
  mounted () {
      this.setDateCur()
  },
  methods: {
    setHeight () { //图表高度
      this.$nextTick(()=>{ 
        let kanban_article = document.getElementsByClassName("kanban_article")[0]
        let views_left = kanban_article.getElementsByClassName('views')[0].getElementsByClassName('views_left')[0].getElementsByClassName('views_left_bottom')[0]
        let dom = kanban_article.offsetHeight/2 - 8 // 8是间距的一半
        let title = views_left.getElementsByClassName('title')[0].offsetHeight
        let form =  views_left.getElementsByClassName('form_search')[0].offsetHeight
        this.chartsH = dom - title - form - 32 - 33 
      })
    },
    setDateCur() {  // 初始化设置默认日期 30天
      let date1 = timeFormat(new Date()).split(' ')[0]
      let date2 = timeFormat(new Date(new Date().getTime() - 30*24*60*60*1000)).split(' ')[0]
      this.timePicker = [date2, date1]
      let obj = timeTransfor(this.timePicker,  this.cycle)
      this.form.local_time.value = obj.start_date + ' - '+ obj.end_date
      this.start_date = obj.start_date
      this.end_date =  obj.end_date  
    },
    getTitleList () { // 文章名称
      articleManageTitle().then(res=>{
        this.titleList = res.data
      })
    }, 

    getSiteList(){ //站点
      siteSiteList().then(res=>{
        this.siteList = res.data
      })
    },
    changeTime (arr) { //时间选择
      if(arr) {
        let obj = timeTransfor(arr,  this.cycle)
        this.form.local_time.value = obj.start_date + ' - '+ obj.end_date
        this.start_date = obj.start_date
        this.end_date =  obj.end_date  
      } else {
        this.form.local_time.value  = null
        this.start_date = ''
        this.end_date =  ''
        this.timePicker = null
      }
      this.getData()
    },
    getData () {
      this.loading = true
      let params = setSearchParams(this.form)
      params.start_date = this.start_date
      params.end_date = this.end_date
      params.cycle = this.cycle
      articleTrans(params).then (res=>{
        if(res.state == 1) {
          let data = res.data
          for(let i = 0; i < data.length; i++){
            data[i].cycleTime = this.cycle
            data[i].page_view = parseInt(data[i].page_view)
            data[i].discount_product_click = parseInt(data[i].discount_product_click)
          }
          this.list = data
        }
        this.loading = false
      })
      
    },
    // 重置按钮
    resetForm(){
      for(let item in this.form){
        this.form[item].value =""
      }
      this.cycle = '日'
      this.setDateCur()
       this.getData()
    },
  }

}
</script>

<style lang="scss">


</style>